<template>
    <div>
        <div class="note"> 
            <p><i>提示：只有待确认才可以修改状态，收费员将待确认改为进行中，将合同和检导单打印给用户</i></p>
        </div>
        <div class="hetong">
            <el-button type="primary" round size="small"> 
                <i class="el-icon-download"></i>
                <a href="http://localhost:9090/api/test/体检合同模板.docx">体检合同模板</a>
            </el-button>
        </div>
        <el-table
            ref="filterTable"
            :data="tableData"
            style="width: 100%">
            <el-table-column
                prop="orderExaminationId"
                label="订单编号"
                width="150"    
            >
            </el-table-column>
            <el-table-column
                prop="orderInfo"
                label="订单名称"
                width="260">
            </el-table-column>
            <el-table-column
                prop="cyPatient.patientName"
                label="患者姓名"
                width="80">
            </el-table-column>
            <el-table-column
                prop="cyPatient.patientAge"
                label="患者年龄"
                width="80">
            </el-table-column>
            <el-table-column
                prop="cyPatient.patientSex"
                label="患者性别"
                width="80">
            </el-table-column>
            <el-table-column
                prop="cyPatient.patientPhone"
                label="联系电话"
                width="130">
            </el-table-column>
            <el-table-column
                prop="orderCreateTime"
                label="订单生成时间"
                width="160">
            </el-table-column>
            <el-table-column
                prop="orderAllPay"
                label="总支付"
                width="110">
            </el-table-column>
            <el-table-column
                prop="orderProOrCom"
                label="类别"
                width="100"
                :filters="[{ text: '项目', value: 1 }, { text: '套餐', value: 2 }]"
                :filter-method="filterTag2"
                filter-placement="bottom-end">
                <template slot-scope="scope">
                    <el-tag
                        :type="scope.row.orderProOrCom === 1 ? 'primary' : 'success'"
                        disable-transitions>
                        <div v-if="scope.row.orderProOrCom === 1">项目</div>
                        <div v-if="scope.row.orderProOrCom === 2">套餐</div>
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                prop="orderStatus"
                label="状态"
                width="100"
                :filters="[ { text: '进行中', value: 2 }]"
                :filter-method="filterTag"
                filter-placement="bottom-end"
                >
                <template slot-scope="scope">
                    <div @click="alterOrderStatus(scope.row)" v-if="scope.row.orderStatus === 1"><el-tag type="warning">待确认</el-tag></div>
                    <div v-if="scope.row.orderStatus === 2"><el-tag type="success">进行中</el-tag></div>
                    <div v-if="scope.row.orderStatus === 3"><el-tag type="info">已完成</el-tag></div>
                </template>
                
                
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="70">
                    <template slot-scope="scope">
                        <el-button @click="guidanceSheet(scope.row)" type="text" size="small">检导单</el-button>
                    </template>
                </el-table-column>
        </el-table>
        <el-dialog 
            title="修改状态" 
            :show-close="false"
            :visible.sync="Visible"
            :data="tableData"
            width="400px"
            >
            <el-form :model="form">
                <el-form-item  style="margin-left: 25% " label="订单编号:" >
                    <span style="float: left;">{{ form.orderExaminationId }}</span>
                </el-form-item>
                <el-form-item style="margin-left: 25% " label="患者姓名:" >
                    <span style="float: left;">{{ form.patientName }}</span>
                </el-form-item>
                <el-radio-group v-model="radio">
                    <el-radio :label="1">待确认</el-radio>
                    <el-radio :label="2">进行中</el-radio>
                    <el-radio :label="3">已完成</el-radio>
                </el-radio-group>
                <div style="margin-top: 10px">
                    <el-button  @click="commit(form.orderExaminationId)">确定</el-button>
                    <el-button  @click="cancelCommit">取消</el-button>
                </div>
            </el-form>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data(){
        return{
            tableData:[],
            Visible:false,
            radio: '1',
            form: {
                orderExaminationId:'',
                patientName:'',
            },
            proName:[],
            proNameLen:0,
            row:[],
        }
    },
    created(){
        this.getAllOrder();
    },
    methods:{
        getAllOrder(){
            this.$axios.get(
                '/order/getAllOrder',
            ).then(res =>{
                if(res != undefined){
                    this.tableData = res.data
                    console.log("用户列表",this.tableData)
                }
            })
        },
        filterTag(value, row) {
            return row.orderStatus === value;
        },
        filterTag2(value, row) {
            return row.orderProOrCom === value;
        },
        guidanceSheet(row){
            localStorage.setItem("guidanceSheet",JSON.stringify(row));
            this.$router.push('/guidanceSheet')
        },
        alterOrderStatus(row){
            this.Visible = true
            this.radio = row.orderStatus
            this.form.orderExaminationId = row.orderExaminationId
            this.form.patientName = row.cyPatient.patientName
            this.row = row

        },
        cancelCommit(){
            this.$message({
                type: 'info',
                message: '已取消修改'
            });   
            this.Visible = false
            this.getAllOrder();
        },
        commit(orderExaminationId){
            this.getVisitInfo(this.row);

            // 修改订单状态
            this.$axios.get(
                "/order/alterStatus",
                {
                    params:{
                        orderExaminationId:orderExaminationId,
                        status: this.radio
                    }
                }

            ).then(res=>{
                if(res!=undefined){
                    if(res.code == 1){
                        this.$message({
                            showClose: true,
                            message: '修改成功',
                            type: 'success'
                        });
                        this.Visible = false
                        this.getAllOrder();
                        if(this.proName.length != 0){
                            // 说明有项目，则调用进行插入
                            this.temp();
                        }
                        
                    }else{
                        this.$message({
                            showClose: true,
                            message: '暂未修改'
                        });
                        this.isAlter = 0
                    }
                    
                }
            })
        },
        async getVisitInfo(row){
            if(row.orderProOrCom == 1){
                    //说明是项目，可以直接填入数据库
                    //那就对orderInfo进行切割一下获取各个的数据库名
                    var projectName = row.orderInfo.split(",")
                    for(var i = 0 ; i < projectName.length ; i++){
                        // 将数据依次插入数据库中
                        this.addVisit(projectName[i]);
                    }
                }else{
                    //说明是套餐，那就需要先拿到项目名称
                    var comName = row.orderInfo.split(",")
                    for(var i = 0;i<comName.length;i++){
                        this.getProjectName(comName[i])
                    }
                    //执行到这所有的项目名都已经获取到了
                    //获取长度并循环调用函数
                    // 但是写的时候发现，这个axios是异步请求，获取不到长度，只能在外面另写一个temp（）
                    //总结就是，不要套axios，执行顺序会变！！
                    
                }
            
        },
        temp(){
            for(var i = 0 ; i < this.proNameLen ; i++){
                // 将数据依次插入数据库中
                this.addVisit(this.proName[i]);
            }
        },
        addVisit(projectName){
            this.$axios.get(
                "/visitDoctor/addInfo",
                {
                    params:{
                        id:this.row.cyPatient.patientIdCard,
                        projectName:projectName,
                        orderExaminationId:this.row.orderExaminationId
                    }
                }
            )
        },
        getProjectName(comName){
            this.$axios.get(
                '/order/getProName',
                {
                    params:{
                        name:comName
                    }
                }
            ).then(res=>{
                if(res != undefined){
                    // 项目名获取成功之后则一个个放入数组中
                    console.log("获取到的项目名称",res)
                    for(var i = 0 ; i<res.data.length;i++){
                        this.proNameLen++;
                        this.proName.push(res.data[i])

                    }
                    console.log("添加完毕之后的proName",this.proName)
                }
            })
        }

    }
}
</script>
<style scoped>
.head{
    margin: 10px 0 10px 20px;
    
}
.hetong a{
    text-decoration: none; /* 去除默认的下划线 */
    outline: none; /* 去除旧版浏览器的点击后的外虚线框 */
    color: white; 
}
.head img{
    float: left;
    width: 45px;
}
.head div{
    float: left;
    font-family: 'STXingkai', Courier, monospace;
    font-size: 34px;
    color: rgb(8, 201, 104);
}
.hetong{
    margin-top: -1%;
    margin-bottom: 1%;
    float: right;
}
.note{
    float: left;
    color: rgb(104, 103, 103);
}
.note p{
    margin-top: -15px;
    font-size: 14px;
    font-family: 'PingFang SC', sans-serif;
}
</style>